<template>
    <div class="login-container">
      <!-- 左侧区域 -->
      <div class="login-left">
        <div class="logo-section">
          <img src="@/assets/loginBox.svg" alt="Logo" class="logo" />
          <h1 class="welcome-text">欢迎使用动力云客系统</h1>
        </div>
      </div>
      
      <!-- 右侧登录区域 -->
      <div class="login-right">
        <div class="login-box">
          <h2 class="login-title">用户登录</h2>
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="rules"
            class="login-form"
            size="large"
          >
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入账号"
                :prefix-icon="User"
                clearable
              />
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                :prefix-icon="Lock"
                show-password
                clearable
                @keyup.enter="handleLogin"
              />
            </el-form-item>
            
            <el-form-item>
              <div class="login-options">
                <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
              </div>
            </el-form-item>
            
            <el-form-item>
              <el-button
                type="primary"
                class="login-button"
                @click="handleLogin"
                :loading="loading"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  // 导入Vue3的响应式API
  import { reactive, ref } from 'vue'
  // 导入Element Plus的消息提示组件
  import { ElMessage } from 'element-plus'
  // 导入Element Plus的图标组件
  import { User, Lock } from '@element-plus/icons-vue'
  // 导入Vue Router的路由钩子
  import { useRouter } from 'vue-router'
  // 导入登录API接口和类型定义
  import { login, type LoginParams } from '@/api/auth'
  
  // 获取路由实例，用于页面跳转
  const router = useRouter()
  
  // 定义登录表单的响应式数据
  // 使用reactive创建响应式对象，包含用户名、密码和记住我选项
  const loginForm = reactive<LoginParams & { remember: boolean }>({
    username: '', // 用户名
    password: '', // 密码
    remember: false // 记住我选项
  })
  
  // 定义表单验证规则
  const rules = {
    username: [
      { required: true, message: '请输入账号', trigger: 'blur' } // 账号必填验证
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' }, // 密码必填验证
      { min: 6, message: '密码长度不能少于6位', trigger: 'blur' } // 密码最小长度验证
    ]
  }
  
  // 创建表单引用，用于调用表单的验证方法
  const loginFormRef = ref()
  // 创建加载状态的响应式变量，控制登录按钮的loading状态
  const loading = ref(false)
  
  // 登录处理函数
  const handleLogin = async () => {
    try {
      // 验证表单数据是否符合规则
      const valid = await loginFormRef.value.validate()
      if (!valid) return // 如果验证失败，直接返回
      
      // 设置加载状态为true，显示登录按钮的loading效果
      loading.value = true
      
      // 从表单数据中解构出用户名和密码
      const { username, password } = loginForm
      // 调用登录API接口
      const response = await login({ username, password })
      
      // 登录成功后，将token保存到本地存储
      localStorage.setItem('token', response.token)
      
      // 处理"记住我"功能
      if (loginForm.remember) {
        // 如果勾选了记住我，将用户名保存到本地存储
        localStorage.setItem('rememberedUsername', username)
      } else {
        // 如果没有勾选记住我，移除本地存储中的用户名
        localStorage.removeItem('rememberedUsername')
      }
      
      // 显示登录成功的消息提示
      ElMessage.success('登录成功！')
      
      // 登录成功后跳转到仪表板页面
      router.push('/dashboard')
      
    } catch (error) {
      // 捕获登录过程中的错误
      console.error('登录失败:', error)
      // 注意：错误信息已在axios拦截器中统一处理并显示给用户
    } finally {
      // 无论登录成功还是失败，都要重置加载状态
      loading.value = false
    }
  }
  
  // 页面初始化时检查本地存储中是否有记住的用户名
  const rememberedUsername = localStorage.getItem('rememberedUsername')
  if (rememberedUsername) {
    // 如果有记住的用户名，自动填充到表单中
    loginForm.username = rememberedUsername
    // 同时勾选"记住我"选项
    loginForm.remember = true
  }
  </script>
  
  <style scoped>
  .login-container {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  /* 左侧样式 */
  .login-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
  }
  
  .logo-section {
    text-align: center;
    color: white;
  }
  
  .logo {
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  }
  
  .welcome-text {
    font-size: 28px;
    font-weight: 300;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 2px;
  }
  
  /* 右侧样式 */
  .login-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
  }
  
  .login-box {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
  }
  
  .login-title {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-size: 24px;
    font-weight: 500;
  }
  
  .login-form {
    width: 100%;
  }
  
  .login-form .el-form-item {
    margin-bottom: 20px;
  }
  
  .login-options {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .login-button {
    width: 100%;
    height: 45px;
    font-size: 16px;
    border-radius: 6px;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .login-container {
      flex-direction: column;
    }
    
    .login-left {
      min-height: 200px;
    }
    
    .logo {
      width: 80px;
      height: 80px;
    }
    
    .welcome-text {
      font-size: 20px;
    }
    
    .login-right {
      padding: 20px;
    }
    
    .login-box {
      padding: 30px 20px;
    }
  }
  </style>